<template>
  <view class="formInfo">
    <view class="form">
      <!-- 姓名 -->
      <view class="name">
        <text>姓名</text>
        <input type="text" v-model="formInfo.name" placeholder="请输入姓名" />
      </view>
      <!-- 身份证 -->
      <view class="name">
        <text>身份证</text>
        <input
          type="number"
          v-model="formInfo.id_card"
          placeholder="请输入身份证"
        />
      </view>
      <!-- 手机号 -->
      <view class="name">
        <text>手机号</text>
        <input
          type="number"
          v-model="formInfo.phone"
          placeholder="请输入手机号"
        />
      </view>
      <!-- 现居地址 -->
      <view class="name">
        <text>现居地址</text>
        <picker class="picker" mode="region" @change="changeAddress">
          <view class="pick">
            <text>{{
              formInfo.address == "" ? "请选择现居地址" : formInfo.address
            }}</text>
          </view>
        </picker>
      </view>
      <!-- 现居详情地址 -->
      <view class="name">
        <text>现居详情地址</text>
        <input
          type="number"
          v-model="formInfo.de_address"
          placeholder="请输入现居详情地址"
        />
      </view>
      <!-- 疫苗人群分类 -->
      <view class="name">
        <text>疫苗人群分类</text>
        <picker
          class="picker"
          mode="selector"
          :range="CrowdArray"
          @change="changeCrowd"
        >
          <view class="pick">
            <text>{{
              formInfo.crowd_sort == ""
                ? "请选择疫苗人群分类"
                : formInfo.crowd_sort
            }}</text>
          </view>
        </picker>
      </view>
    </view>
    <view class="foot" v-if="info">
      <view class="Hospital">
        <text>{{ info.Hospital }}</text>
        <text>{{ info.address }}</text>
        <view class="company">
          <view
            class="company-item"
            v-for="(item, index) in info.company"
            :key="index"
            >{{ item }}</view
          >
        </view>
      </view>
      <!-- 周日 -->
      <view class="week">
        <view
          class="week-item"
          @click="tabWeek(item.date)"
          v-for="(item, index) in info.week"
          :class="{ tabWeekColor: tabWeekInfo == item.date }"
          :key="index"
        >
          <p class="p">{{ item.day }}</p>
          <p class="p">{{ item.date }}</p>
          <p class="p">{{ item.Have }}</p>
        </view>
      </view>
      <!-- 上午下午时段 -->
      <view class="data" v-for="(item, index) in info.lasting" :key="index">
        <text class="head">{{ item.period }}</text>
        <view class="data-list">
          <view
            class="data-item"
            :class="{ tabDateColor: tabDateInfo == o.start_time }"
            @click="tabDate(o.start_time, o.end_time, item.period)"
            v-for="(o, i) in item.time"
            :key="i"
          >
            <p>{{ o.start_time }}-{{ o.end_time }}</p>
            <text>剩余{{ o.over }}</text>
          </view>
        </view>
      </view>
      <view class="kong"></view>
      <view class="footer">
        <button @click="cancel">取消</button>
        <button @click="subMit">提交预约</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import type { NewAppTimeK, NewAppTimeT } from "../../types/type";
const CrowdArray = ref([
  "医疗卫生人员",
  "卫生系统内工作的其他人员",
  "因公出国人员",
  "对外劳务派遣人员",
  "留学生",
  "因私出国人员",
  "海关边检人员",
  "公安系统,消防人员",
  "党政机关,事业单位人员",
  "社区工作者",
  "教育工作者",
  "小学和中学学生",
  "其他人员",
]);
// 表单提交数据
const formInfo = reactive<NewAppTimeT>({
  name: "",
  id_card: "",
  phone: "",
  address: "",
  de_address: "",
  crowd_sort: "",
  date: "",
  period: "",
  reserve_time: "",
  when: 0,
});
const info = ref<NewAppTimeK>();
// 获取数据
onMounted(() => {
  getList();
});
const getList = async () => {
  const res: any = await api.newapptime();
  console.log(res);
  info.value = res.data[0];
};

// 省市区三级联动
const changeAddress = (e: any) => {
  formInfo.address = e.detail.value.join(" ");
};
const changeCrowd = (e: any) => {
  formInfo.crowd_sort = CrowdArray.value[e.detail.value];
};
// 周几
const tabWeekInfo = ref<string>("");
const tabWeek = (item: string) => {
  tabWeekInfo.value = item;
  formInfo.date = item;
};
// 几点
const tabDateInfo = ref<string>("");
const tabDate = (data: string, end_time: string, period: string) => {
  tabDateInfo.value = data;
  formInfo.reserve_time = data + "-" + end_time;
  formInfo.period = period;
};
// 提交预约
const subMit = async () => {
  if (tabDateInfo.value == "" || tabWeekInfo.value == "") {
    uni.showToast({
      title: "请选择日期",
      icon: "none",
    });
  } else {
    const token = uni.getStorageSync("token");
    if (token) {
      const res: any = await api.rescovid(formInfo);
      console.log(res);
      if (res.msg == "提交成功") {
        uni.showToast({
          title: "预约成功",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/navPage/SubscribeList/SubscribeList",
          });
        }, 600);
      }
    } else {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    }
  }
};
// 取消返回上一页面
const cancel = () => {
  uni.navigateBack({
    delta: 1,
  });
};
</script>

<style lang="scss" scoped>
.formInfo {
  width: 100vw;
  background-color: #f7f7f7;
  .tabWeekColor {
    background-color: #2c76ef !important;
    color: #fff;
  }
  .tabDateColor {
    background-color: #2c76ef !important;
    color: #fff;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 200rpx;
    background-color: #fff;
    justify-content: space-around;
    button:first-child {
      background-color: #e8f2fe;
      color: #2c76ef;
      width: 250rpx;
    }
    button:last-child {
      background-color: #2c76ef;
      color: #fff;
      width: 250rpx;
    }
  }
  //   头部表单组件
  .form {
    width: 100%;
    // height: 500rpx;
    background-color: #fff;
    padding: 0 10rpx;
    box-sizing: border-box;
    .name {
      display: flex;
      align-items: center;
      padding: 40rpx 10rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      input {
        flex: 1;
        text-align: right;
      }
    }
    .picker {
      flex: 1;
      text-align: right;
    }
    .name:last-child {
      border: 0;
    }
  }
  .foot {
    padding: 0 20rpx;
    box-sizing: border-box;
    //   医院
    .Hospital {
      text:nth-child(1),
      text:nth-child(2) {
        display: block;
      }
      text:nth-child(1) {
        font-weight: 600;
        font-size: 35rpx;
      }
      text:nth-child(2) {
        margin-top: 10rpx;
      }
      .company {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        .company-item {
          padding: 10rpx;
          box-sizing: border-box;
          border-radius: 10rpx;
          background-color: #f7f7f7;
          margin-right: 10rpx;
        }
      }
    }
    .week,
    .Hospital,
    .data {
      width: 100%;
      background-color: #fff;
      border-radius: 20rpx;
      margin: 20rpx 0;
      padding: 20rpx;
      box-sizing: border-box;
    }
    .week {
      display: flex;
      align-items: center;
      .week-item {
        text-align: center;
        background-color: #f7f7f7;
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 15rpx;
        .p {
          margin: 1rpx 0;
        }
      }
    }
    .data {
      .head {
        font-weight: 600;
        font-size: 35rpx;
        margin-bottom: 20rpx;
      }
      .data-list {
        display: flex;
        align-items: center;
        .data-item {
          text-align: center;
          padding: 20rpx 15rpx;
          box-sizing: border-box;
          background-color: #f7f7f7;
          border-radius: 10rpx;
          margin-right: 15rpx;
        }
      }
    }
  }
  .kong {
    height: 200rpx;
  }
}
</style>
